<template>
  <div class="rainfall_regulative_wrap layout_ch_page dur-400">
    <!-- 框架图 -->
    <img class="frame" src="./images/frame.png" draggable="false" />

    <!-- 参数值 -->
    <ParamValueText
      v-for="(param, indexP) in wsDataStore.rainfallRegulativeData.params"
      :key="indexP"
      :top="param.top"
      :left="param.left"
      :width="param.width"
      :height="param.height"
    >
      {{ param.value }}
    </ParamValueText>

    <!-- 阀门 -->
    <Vavle1
      v-for="(vavle, indexV) in wsDataStore.rainfallRegulativeData.valves"
      :value="vavle.value"
      :key="indexV"
      :top="vavle.top"
      :left="vavle.left"
      :font-size="vavle.fontSize"
      :block-size="vavle.blockSize"
    />
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
import "./index.scss";
export default defineComponent({
  name: "RainfallRegulative",
});
</script>
<script setup>
import ParamValueText from "@/components/paramValueText/index.vue";
import Vavle1 from "@/components/vavle1/index.vue";
import { animate } from "animejs";
import { useWsDataStore } from "@/store";

const wsDataStore = useWsDataStore();

onMounted(() => {
  // 入场动画
  animate(".dur-400", {
    y: "-300px",
    duration: 400,
  });
});
</script>

<style lang="scss" scoped></style>
